<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
<!-- qtquick-ui-forms.qdoc -->
  <title>Qt Quick UI Forms | Qt Creator Manual</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="index.html">Qt Creator Manual</a></td><td >Qt Quick UI Forms</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="index.html">Qt Creator Manual 4.11.1</a></td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
  <link rel="prev" href="qtquick-iso-icon-browser.html" />
  <link rel="next" href="creator-qml-modules-with-plugins.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="qtquick-iso-icon-browser.html">Browsing ISO 7000 Icons</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="creator-qml-modules-with-plugins.html">Using QML Modules with Plugins</a>
</p><p/>
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#supported-methods">Supported Methods</a></li>
<li class="level2"><a href="#javascript-functions">JavaScript Functions</a></li>
<li class="level2"><a href="#qt-qml-methods">Qt QML Methods</a></li>
<li class="level1"><a href="#using-qt-quick-ui-forms">Using Qt Quick UI Forms</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Qt Quick UI Forms</h1>
<span class="subtitle"></span>
<!-- $$$creator-quick-ui-forms.html-description -->
<div class="descr"> <a name="details"></a>
<p>You can use Qt Creator wizards to create UI forms that have the filename extension <i>.ui.qml</i>. The UI forms contain a purely declarative subset of the QML language. It is recommended that you edit the forms in the <b>Design</b> mode. Qt Creator enforces the use of the supported QML features by displaying error messages.</p>
<p>The following features are not supported:</p>
<ul>
<li>JavaScript blocks</li>
<li>Other bindings than pure expressions</li>
<li>Signal handlers</li>
<li>States in other items than the root item</li>
<li>Root items that are not derived from <a href="http://doc.qt.io/qt-5/qquickitem.html">QQuickItem</a> or <a href="http://doc.qt.io/qt-5/qml-qtquick-item.html">Item</a></li>
</ul>
<p>The following types are not supported:</p>
<ul>
<li>Behavior</li>
<li>Binding</li>
<li>Canvas</li>
<li>Component</li>
<li>Shader Effect</li>
<li>Timer</li>
<li>Transform</li>
<li>Transition</li>
</ul>
<a name="supported-methods"></a>
<h2 id="supported-methods">Supported Methods</h2>
<p>Qt Creator supports most JavaScript functions that are supported by the QML engine, as well as a subset of Qt QML methods.</p>
<p>This section lists the functions that you can use in <i>.ui.qml</i> files.</p>
<a name="javascript-functions"></a>
<h3 id="javascript-functions">JavaScript Functions</h3>
<p>As a rule of thumb, <i>pure functions</i> are supported. They only depend on and modify states of parameters that are within their scope, and therefore always return the same results when given the same parameters. This makes it possible to convert and reformat property bindings without breaking the <i>.ui.qml</i> files.</p>
<p>The following JavaScript functions are supported:</p>
<ul>
<li><code>charAt()</code></li>
<li><code>charCodeAt()</code></li>
<li><code>concat()</code></li>
<li><code>endsWith()</code></li>
<li><code>includes()</code></li>
<li><code>indexOf()</code></li>
<li><code>isFinite()</code></li>
<li><code>isNaN()</code></li>
<li><code>lastIndexOf()</code></li>
<li><code>substring()</code></li>
<li><code>toExponential()</code></li>
<li><code>toFixed()</code></li>
<li><code>toLocaleLowerCase()</code></li>
<li><code>toLocaleString</code></li>
<li><code>toLocaleUpperCase()</code></li>
<li><code>toLowerCase()</code></li>
<li><code>toPrecision()</code></li>
<li><code>toString()</code></li>
<li><code>toUpperCase()</code></li>
<li><code>valueOf()</code></li>
</ul>
<p>In addition, all functions of the <code>Math</code> and <code>Date</code> objects are supported.</p>
<p>For more information, see <a href="https://doc.qt.io/qt-5/qtqml-javascript-functionlist.html">List of JavaScript Objects and Functions</a>.</p>
<a name="qt-qml-methods"></a>
<h3 id="qt-qml-methods">Qt QML Methods</h3>
<p>Qt Creator supports color methods, helper methods for creating objects of specific data types, and translation methods.</p>
<p>The following color methods are supported:</p>
<ul>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#darker-method">Qt.darker()</a></li>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#hsla-method">Qt.hsla()</a></li>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#hsva-method">Qt.hsva()</a></li>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#lighter-method">Qt.lighter()</a></li>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#rgba-method">Qt.rgba()</a></li>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#tint-method">Qt.tint()</a></li>
</ul>
<p>The following helper methods are supported:</p>
<ul>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#formatDate-method">Qt.formatDate()</a></li>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#formatDateTime-method">Qt.formatDateTime()</a></li>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#formatTime-method">Qt.formatTime()</a></li>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#matrix4x4-method">Qt.matrix4x4()</a></li>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#point-method">Qt.point()</a></li>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#quaternion-method">Qt.quaternion()</a></li>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#rect-method">Qt.rect()</a></li>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#size-method">Qt.size()</a></li>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#vector2d-method">Qt.vector2d()</a></li>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#vector3d-method">Qt.vector3d()</a></li>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#vector4d-method">Qt.vector4d()</a></li>
</ul>
<p>The following translation methods are supported:</p>
<ul>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#qsTr-method">qsTr()</a></li>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#qsTranslate-method">qsTranslate()</a></li>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#qsTranslateNoOp-method">qsTranslateNoOp()</a></li>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#qsTrId-method">qsTrId()</a></li>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#qsTrIdNoOp-method">qsTrIdNoOp()</a></li>
<li><a href="http://doc.qt.io/qt-5/qml-qtqml-qt.html#qsTrNoOp-method">qsTrNoOp()</a></li>
</ul>
<p>For more information about using the methods, see <a href="https://doc.qt.io/qt-5/qml-qtqml-qt.html">Qt QML Methods</a>.</p>
<a name="using-qt-quick-ui-forms"></a>
<h2 id="using-qt-quick-ui-forms">Using Qt Quick UI Forms</h2>
<p>You can edit the forms in the <b>Form Editor</b> and <b>Text Editor</b> tabs in the <b>Design</b> mode. Items that are supposed to be used in QML code have to be exported as properties:</p>
<pre class="cpp">

  Item {
      width: <span class="number">640</span>
      height: <span class="number">480</span>

      property alias button: button

      Button {
          anchors<span class="operator">.</span>centerIn: parent
          id: button
          text: qsTr(<span class="string">&quot;Press Me&quot;</span>)
      }
  }

</pre>
<p>The property alias exports the button to the QML code that uses the form. You can use the <img src="images/export_checked.png" alt="" /> (<b>Export</b>) button in the <b>Navigator</b> to export an item as a property:</p>
<p class="centerAlign"><img src="images/qmldesigner-export-item.png" alt="" /></p><p>In the QML file that uses the form, you can use the <code>button</code> property alias to implement signal handlers, for example. In the following code snippet, the UI form is called <i>MainForm.ui.qml</i>:</p>
<pre class="cpp">

  MainForm {
      anchors<span class="operator">.</span>fill: parent
      button<span class="operator">.</span>onClicked: messageDialog<span class="operator">.</span>show(qsTr(<span class="string">&quot;Button pressed&quot;</span>))
  }

</pre>
<p>You can also assign properties or define behavior or transitions.</p>
<p>To move from the <b>Design</b> mode directly to the implementation of a type in the .qml file, right-click the type in the <b>Navigator</b> and select <b>Go to Implementation</b> in the context menu.</p>
</div>
<!-- @@@creator-quick-ui-forms.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="qtquick-iso-icon-browser.html">Browsing ISO 7000 Icons</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="creator-qml-modules-with-plugins.html">Using QML Modules with Plugins</a>
</p>
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2019 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>
